<div class="flex-container" fxLayout fxLayoutGap="40px">
  <div class="flex-element" fxFlex>
    <mat-card>
      <section class="mat-typography">
        <h2>{{ 'PAGES.JOB-LIST.TITLE' | translate }}</h2>
      </section>
      <mat-divider [inset]="true"></mat-divider>
      <br>
      <mat-list *ngIf="jobs.length > 0">
        <mat-list-item class="job-item" *ngFor="let job of jobs; let jobIndex = index" [routerLink]="['edit-job', job.id]">
          <mat-icon svgIcon="custom_icon_alert" matTooltip="{{ 'PAGES.JOB-LIST.ALERT' | translate }}" *ngIf="job.alert" mat-list-icon></mat-icon>
          <mat-icon svgIcon="custom_icon_check" matTooltip="{{ 'PAGES.JOB-LIST.NO-ALERT' | translate }}" *ngIf="!job.alert" mat-list-icon></mat-icon>
          <mat-icon svgIcon="custom_icon_working" matTooltip="{{ 'PAGES.JOB-LIST.ACTIVE' | translate }}" *ngIf="job.status === jobStatus.Active" mat-list-icon></mat-icon>
          <mat-icon svgIcon="custom_icon_done" matTooltip="{{ 'PAGES.JOB-LIST.TERMINATED' | translate }}" *ngIf="job.status === jobStatus.Terminated" mat-list-icon></mat-icon>
          <mat-icon svgIcon="custom_icon_pause" matTooltip="{{ 'PAGES.JOB-LIST.PAUSE' | translate }}" *ngIf="job.status === jobStatus.Pause" mat-list-icon></mat-icon>
          <h4 mat-line>{{job.name}}</h4>
          <p mat-line *ngIf="job.type !== jobType.Live">
            <strong>{{ 'PAGES.JOB-LIST.START-DATE' | translate }}:</strong> {{job.getStartDateReadable()}}
            <span *ngIf="job.type === jobType.Recurring">
              - <strong>{{ 'PAGES.JOB-LIST.END-DATE' | translate }}:</strong> {{job.getEndDateReadable()}}
            </span>
            <span *ngIf="job.type !== jobType.Live && job.maxExecutionTime !== 0">
              - <strong>{{ 'PAGES.JOB-LIST.MAX-EXECUTION-TIME' | translate }}:</strong> {{job.getMaxExecutionTimeFormatted()}}
              {{'PAGES.EDIT-JOB.FIELDS.MAX-EXECUTION-TIME-MINUTES' | translate}} = {{maxExecutionTimeHours[jobIndex]}} {{'PAGES.EDIT-JOB.FIELDS.MAX-EXECUTION-TIME-HOURS' | translate}}
            </span>
            <span *ngIf="job.type !== jobType.OneTime && job.status !== jobStatus.Terminated">
              <br/>
              <strong>{{ 'PAGES.JOB-LIST.NEXT-RUN' | translate }}: </strong> <span *ngIf="scheduledJobs[job.id]; else no_next_run">{{scheduledJobs[job.id]}}</span>
              <ng-template #no_next_run> {{ 'PAGES.JOB-LIST.NO-NEXT-RUN' | translate }}</ng-template>
            </span>
          </p>

          <p mat-line *ngIf="job.type === jobType.Live"><strong>{{ 'PAGES.JOB-LIST.LIVE-SYNC' | translate }}</strong></p>

          <div *ngIf="job.isRunning">
            <mat-spinner matTooltip="{{ 'PAGES.JOB-LIST.BACK-RUN' | translate }}" [diameter]="24"></mat-spinner>
          </div>
          <button *ngIf="job.isRunning && job.type !== jobType.Live" (click)="stopBackupNow(job)"
                  matTooltip="{{ 'PAGES.JOB-LIST.STOP-BACK-NOW' | translate }}" mat-icon-button class="float-right">
            <mat-icon color="accent">stop</mat-icon>
          </button>

          <button *ngIf="!job.isRunning && job.type !== jobType.Live" (click)="startBackupManually(job)"
                  matTooltip="{{ 'PAGES.JOB-LIST.BACK-NOW' | translate }}" mat-icon-button class="float-right">
            <mat-icon svgIcon="custom_icon_cloud_up"></mat-icon>
          </button>
          <button *ngIf="!job.isRunning && job.status !== jobStatus.Terminated" (click)="togglePause(job);" mat-icon-button
                  class="float-right">
            <mat-icon svgIcon="custom_icon_play" matTooltip="{{ 'PAGES.JOB-LIST.START-JOB' | translate }}" *ngIf="job.status === jobStatus.Pause"></mat-icon>
            <mat-icon svgIcon="custom_icon_pause" matTooltip="{{ 'PAGES.JOB-LIST.PAUSE-JOB' | translate }}" *ngIf="job.status === jobStatus.Active"></mat-icon>
          </button>
          <button *ngIf="!job.isRunning" (click)="deleteJob(job.id)" matTooltip="{{ 'PAGES.JOB-LIST.DELETE-JOB' | translate }}" mat-icon-button class="float-right">
            <mat-icon svgIcon="custom_icon_delete"></mat-icon>
          </button>
        </mat-list-item>
      </mat-list>

      <section class="mat-typography" *ngIf="jobs.length === 0">
        <br>
        <h2 class="no-job">{{ 'PAGES.JOB-LIST.NO-JOB' | translate }}</h2>
        <p class="no-job">
          <img style="width: 500px;" src="assets/icons/no_jobs.svg" />
        </p>
      </section>

    </mat-card>
  </div>
</div>
